<template>
    <div class="load-box">
        <svg xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink">

            <rect x="10" y="10" height="60" width="60"
                  style="stroke:#ff0000; fill: #0000ff">

                <animateTransform
                    attributeName="transform"
                    begin="0s"
                    dur="2s"
                    type="rotate"
                    from="0 60 60"
                    to="360 60 60"
                    repeatCount="indefinite"
                />
            </rect>
        </svg>

    </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">

.load-box {
    //background-color: rgba(0, 0, 0, .5);
    width: 100px;
    height: 100px;
    border-radius: 5px;
    box-shadow: 0px 1px 15px rgba(0, 0, 0, .5);
    //color: #fff;
    //display: flex;
    //flex-direction: column;
    //align-items: center;
    //justify-content: center;
    letter-spacing: .8px;
    font-size: 13px;

    img {
        width: 30px;
        margin-bottom: 8px;
        -webkit-animation: rotate .8s linear infinite;
    }
}

@keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}
</style>
